<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯品会网站登录</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./login.css">

        
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        
    </head>

    <body>
        <div id="box">
            <div id="box-content">
                <div id="box-head">
                    <a href="./index.html"></a>
                    <span></span>
                </div>
                <div id="content">

                    <div id="reg">
                        <div id="reg-content">
                            <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" id="login1"
                                    style="color: #fa246b;">扫码登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
                                    href="javascript:;" id="login2">账户登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
                            <div id="login">
                                <input type="text" name="" id="ipts1" placeholder="手机号/用户名/绑定邮箱">
                                <p></p>
                                <input type="text" name="" id="ipts2" placeholder="密码">
                                <p></p>
                                <p>短信验证码登录<i>忘记密码</i></p>
                                <input type="checkbox" name="" id="checkbox">
                                <span id="fontsize">我已阅读并接受以下条款：《唯品会服务条款》《唯品会隐私政策》《唯品支付用户服务协议》</span>

                                <button>立即登录</button>
                            </div>
                            <div id="erweima">
                                <span><img src="./img/erweima.png" alt=""></span>
                                <p>打开<a href="">唯品会APP-个人中心，</a>扫一扫登录</p>
                                <input type="checkbox" name="" id="checkbox">
                                <i id="">我已阅读并接受以下条款：《唯品会服务条款》《唯品会隐私政策》《唯品支付用户服务协议》</i>
                            </div>

                            <h4></h4>

                            <ul>
                                <li style="color: rgb(173, 163, 163);">新浪微博</li>
                                <li>QQ</li>
                                <li>支付宝</li>
                                <li style="color: rgb(173, 163, 163);">更多</li>
                                <li><a href="./register.html">免费注册</a> </li>
                            </ul>

                            <!-- <input type="checkbox" name="" id="checkbox">
                    <span id="fontsize">我已阅读并接受以下条款：《唯品会服务条款》《唯品会隐私政策》《唯品支付用户服务协议》</span> 

                    <button>立即注册</button> -->

                        </div>
                    </div>

                </div>
                <p id="op"></p>
                <div id="nav">
                    <div id="nav-box">
                        <ul>
                            <p >正品保障</p>
                            <li>服务保障</li>
                            <li>七天无理由放心退</li>
                            <li>7*15小时客户服务</li>
                        </ul>
                        <ul>
                            <p >购物指南</p>
                            <li>导购演示</li>
                            <li>订单操作</li>
                            <li>会员注册</li>
                            <!-- <li>账户管理</li> -->
                            <!-- <li>收货样品</li> -->
                        </ul>
                        <ul>
                            <p >支付方式</p>
                            <li>23家主流网银支付</li>
                            <li>支付宝、银联等支付</li>
                            <li>信用卡支付</li>
                        </ul>
                        <ul>
                            <p >配送方式</p>
                            <li>配送范围及运费</li>
                            <li>验货与签收</li>
                        </ul>
                        <ul>
                            <p >售后服务</p>
                            <li>退货政策</li>
                            <li>退货流程</li>
                            <li>退款方式和时效</li>
                            <li>换货服务</li>
                        </ul>
                        <ul>

                        </ul>

                    </div>
                    <ul id="list">
                        <li>关于我们&nbsp;</li>
                        <li>About us&nbsp; </li>
                        <li>Investor Relations&nbsp; </li>
                        <li>媒体报道&nbsp; </li>
                        <li>品牌招商&nbsp; </li>
                        <li>平台规则&nbsp; </li>
                        <li>隐私条款&nbsp; </li>
                        <li>唯品诚聘 &nbsp;</li>
                        <li>唯品卡&nbsp; </li>
                        <li>联系我们&nbsp; </li>
                        <li>廉正举报 &nbsp;</li>

                    </ul>
                </div>
                <div id="box-bottom">
                    <p>Copyright © 2008-现在 vip.com，All Rights Reserved 使用本网站即表示接受 唯品会用户协议。版权所有 广州唯品会电子商务有限公司</p>
                    <p>粤公网安备 44010302111111号 粤ICP备08114786号 增值业务经营许可证：粤B2-20170777 网络文化经营许可证：粤网文〔2021〕2056-282号</p>
                    <p>经营主体证照 风险监测信息 互联网药品信息服务资格证书：（粤）-经营性-2018-0271 网络食品交易第三方平台备案凭证：粤B2-20170777
                        医疗器械网络交易服务第三方平台备案凭证：（粤）网械平台备字[2019]第00001号 出版物网络交易平台服务经营备案证：粤新出网备（2021）1号 未成年人关怀专区</p>
                    <p>违法和不良信息举报电话：4006789888；举报邮箱：privacy@vipshop.com</p>
                </div>
            </div>
        </div>
        <script>
            let login1 = document.querySelector("#login1")
            let login2 = document.querySelector("#login2")
            let log1 = document.querySelector("#login")
            let log2 = document.querySelector("#erweima")

            console.log(login1);
            login1.onclick = function () {
                console.log(123);
                log2.style.display = 'block'
                log1.style.display = 'none'
                login1.style.color = '#fa246b'
                login2.style.color = 'black'
            }
            login2.onclick = function () {
                console.log(123);
                log1.style.display = 'block'
                log2.style.display = 'none'
                login2.style.color = '#fa246b'
                login1.style.color = 'black'
            }




            let ipts = document.querySelectorAll('input')

            let op = document.querySelectorAll("#login p")
            let isUsername = false;
            let isPassword = false

            ipts[0].onchange = function () {
                // console.log(123);
                let username = ipts[0].value
                let reg = /^\w{3,16}$/
                if (reg.test(username)) {
                    console.log('正确');
                    isUsername = true;
                    op[0].innerHTML = ''
                
                }else {
                    console.log('错误');
                    isUsername = false;
                    op[0].innerHTML = '请输入正确的登录名'
                    op[0].style.color = 'red'
                }


            }
            ipts[1].onchange = function () {
                // console.log(123);
                let password = ipts[1].value
                let reg = /^\w{3,16}$/
                // let reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,20}$/
                if (reg.test(password)) {
                    console.log('正确');
                    isPassword = true
                } else {
                    console.log('错误');
                    isPassword = false
                    op[1].innerHTML = '密码由8-20位字母,数字和符号组合'
                    op[1].style.color = 'red'
                }



            }
            let btn = document.querySelector('button')
            let checkbox = document.querySelector('#checkbox')



            btn.onclick = function(){
                console.log(btn);
                if(checkbox.checked&&isUsername&&isPassword){

                    console.log("复选框输入框正确");
                    let url = 'http://jx.xuzhixiang.top/ap/api/login.php';
                    let username = ipts[0].value
                    let password = ipts[1].value
                    axios.get(url,{params:{username,password}}).then((v)=>{
                        console.log(v.data);
                        if(v.data.code == 1){
                            alert(v.data.msg)
                        localStorage.setItem("uid", v.data.data.id)
                        localStorage.setItem('token', v.data.data.token)
                        localStorage.setItem("username", v.data.data.username)
                        location.href = "index.html"



                            location.href = "index.html"
                        }else if(v.data.code == 0){
                            alert(v.data.msg)
                        }



                    })


                }


            }
        

            

        </script>
    </body>

    </html>